---
import jetbrains from "#/components/brand/jetbrains-example.svg"
import supermolot from "#/components/brand/supermolot-example.svg"
import { Image } from "astro:assets"
import ColorPalette from "../components/brand/ColorPalette.astro"
import FontDisplay from "../components/brand/FontDisplay.astro"
import LogoDisplay from "../components/brand/LogoDisplay.astro"
import PdfDisplay from "../components/brand/PdfDisplay.astro"
import RefreshDisplay from "../components/brand/RefreshDisplay.astro"
import ContainedSection from "../components/ContainedSection.astro"
import H1 from "../components/typography/h1.astro"
import Layout from "../layouts/Layout.astro"
---

<Layout title="Brand">
  <ContainedSection className="py-16">
    <H1>Our <span class="text-accent-500">brand</span></H1>

    <div class="flex flex-col gap-4 mt-8">
      <div class="flex flex-col gap-4">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-accent-500"></div>
          <p class="font-mono text-2xl">REFRESH</p>
        </div>
        <RefreshDisplay />
      </div>
    </div>

    <div class="flex flex-col gap-4 mt-8">
      <div class="flex flex-col gap-4">
        <div class="flex w-full justify-between items-center">
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 bg-accent-500"></div>
            <p class="font-mono text-2xl">LOGOTYPE</p>
          </div>
          <a
            class="font-bold font-mono text-accent-500"
            target="_blank"
            href="https://drive.google.com/drive/folders/1Q4Qci4TtHYCWvB9oNA-SuYEPgyA_AMVI"
          >[DOWNLOAD]</a>
        </div>
        <LogoDisplay />
      </div>
    </div>

    <div class="flex flex-col gap-4 mt-8">
      <div class="flex items-center gap-2">
        <div class="w-2 h-2 bg-accent-500"></div>
        <p class="font-mono text-2xl">COLORS</p>
      </div>

      <div class="grid grid-cols-5 gap-4">
        <ColorPalette
          label="Primary"
          colors={["#000000", "#FFFFFF"]}
          class="col-span-full md:col-span-3"
          vertical
        />
        <ColorPalette
          label="Secondary"
          colors={["#A0ECFD", "#030711", "#9CA3AF", "#111214"]}
          class="col-span-full md:col-span-2"
          cols={2}
        />
      </div>
    </div>

    <div class="flex flex-col gap-4 mt-8">
      <div class="flex flex-col gap-4">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-accent-500"></div>
          <p class="font-mono text-2xl">TYPOGRAPHY</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <FontDisplay
            fontFamily="mono"
            label="Jet Brains"
            link="https://drive.google.com/file/d/1Gq_txYmdtL7lebQTuFCqRP4apDMDU4yN/view?usp=sharing"
          >
            <Image
              src={jetbrains}
              alt="Jet brains example"
              class="h-full w-fit"
            />
          </FontDisplay>
          <FontDisplay
            fontFamily="supermolot"
            label="Supermolot"
            link="https://drive.google.com/file/d/1kS9aRiy5f7zS70VHROiYXcZHLJFExMFO/view?usp=sharing"
          >
            <Image
              src={supermolot}
              alt="supermolot example"
              class="h-full w-fit"
            />
          </FontDisplay>
        </div>
      </div>
    </div>

    <div class="flex flex-col gap-4 mt-8">
      <div class="flex flex-col gap-4">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-accent-500"></div>
          <p class="font-mono text-2xl">BRAND GUIDE</p>
        </div>
        <PdfDisplay />
      </div>
    </div>
  </ContainedSection>
</Layout>
